<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小敖出版</title>
  <style>
    .top {display:flex;
      justify-content:center;
      width:100%;
      height:40px;
      color:#c4c4c4;
      font-size:12px;
      background-color: #333333;}

      .top p {margin-right:20%;}

      ul {display:flex;
      }
      ul li {list-style-type:none;
        border-right:1px solid #c4c4c4;


      }
      ul li:last-child {border-right:none;}
      ul a {text-decoration:none;
        color:#c4c4c4;
        padding:0 20px;
      }
      .footer {width:100%;
height:40px;
      background-color:#333333;
      color:#c4c4c4;
      font-size:12px;
      text-align:center;
      line-height:40px;
      margin-top:20px;}

    .header{display:flex;
        justify-content: space-between;
        width:100%;
        margin-top:25px;
      position: sticky;
      top:0;
      background-color: white;
      border-radius: 0 0 8px 8px;

      }
       .search form {
         display:flex;
         width:400px;
        height:26px;
        border:1px solid #2f5df2;
        border-radius:26px;
      }
       .header input {border:none;

         border-radius:26px;


       }
       .header input[type="text"] {width:80%;
         margin:0 10px;
         font-size: 26px;


       }
       .herder input[type="submit"] {width:20%;

         background-color: #2f5df2;
         color:#ffffff;

       }
       .banner {display:flex;
         width:100%;
         justify-content: center;
         margin-top:21px;
       }
       .ad img {width:80%;
         height:311px;

       }
       .menu {width:20%;
         height:311px;
         background-color:#2f5df2;
         margin-right:100px;


       }
       .menu p,.menu a {text-decoration:none;
         color:#ffffff;
         text-align:center;
         font-size:12px;
         padding:4px 0;

       }
       .menu a:hover{color:yellow;
       cursor:pointer;}

    .goods_title{font-size:25px;
      color:#333333;
    }
    .container{width:100%;
      display:flex;
      justify-content: space-between;

    }
    .item img {padding:10px 0;
    width:200px;
    height:300px;}
    .name {color:#333333;}
    .info {color:#787878;}
    .price {color:#e92845;
      font-weight:500;
    }
    .item {font-size:13px;
      text-align:center;
      background-color:#ffffff;
      transition:all 0.3s;
    }
    .item:hover{
      border-radius:12px;
      cursor:pointer;
      box-shadow:0 19px 39px 0 #999999;
      transform:translate(0,-4px);


    }
    .price {color:#e92845;
      font-weight:500;
    }


  </style>

</head>
<body>
<div class="top">
  <p>优选欢迎你</p>
  <ul>
    <li><a href="#">登录</a></li>
    <li><a href="#">注册</a></li>
    <li><a href="#">我的订单</a></li>
    <li><a href="#">个人中心</a></li>
    <li><a href="#">帮助中心</a></li>
  </ul>
</div>
<div class="shop">
  <div class="header">
    <div class="logo">
      <img src="https://ts1.cn.mm.bing.net/th/id/R-C.efd8af947b68e5d9d791f657d59dda2c?rik=Tf%2fqQd%2fQvHAShA&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fwater%2f44703%2fgoods_water_44703_698_620.44_.png&ehk=0M6rIJc9HcNvmaagiHQz2JotDQrsnf8jYLqb%2bu1YHpk%3d&risl=&pid=ImgRaw&r=0" width="127" height="32">
    </div>
  <div class="search">
    <form action="#">
    <input type="text" placeholder="请输入搜索内容">
    <input type="submit" value="搜一搜">
    </form>
  </div>
    </div>
  <div class="banner">
    <div class="menu">
       <p><a herf="#">优选推荐</a>/<a href="#">手机数码</a></p>
       <p><a herf="#">家用电器</a>/<a href="#">智能家庭</a></p>
       <p><a herf="#">美容美妆</a>/<a href="#">鞋靴箱包</a></p>
       <p><a herf="#">电脑办公</a>/<a href="#">实用工具</a></p>
       <p><a herf="#">服装配饰</a>/<a href="#">运动户外</a></p>
       <p><a herf="#">健康保养</a>/<a href="#">美妆个护</a></p>
       <p><a herf="#">日用文创</a>/<a href="#">家纺餐厨</a></p>
       <p><a herf="#">美酒乳饮</a>/<a href="#">休闲零食</a></p>
      </div>

    <div class="ad">
      <img src="https://img.zcool.cn/community/01ecb05c9591efa801208f8b903c9b.png@1280w_1l_2o_100sh.png" height="311px">
    </div>
  </div>
  <div class="goods">
    <div class="goods_title"></div>
    <div class="container">
      <div class="item">
        <img src="https://pic1.zhimg.com/v2-8dc14698bc29f8874c01d2899af9303f_r.jpg" >
        <p class="name">指甲油</p>
        <p class="info">持久在蔡伊婷指甲盖</p>
        <p class="price">￥299</p>
      </div>
        <div class="item">
          <img src="https://ts1.cn.mm.bing.net/th/id/R-C.4602607c21a1238b7616df1a4dd10f3d?rik=MArO53M2f078Kg&riu=http%3a%2f%2fp2.ol-cdn.com%2fproduct%2fraw%2f1%2f16%2f5209effb7165c.jpg&ehk=e0GzIqoGkG5K2NrGy1Lg6YCLRm1mQbqm7GjEe831r2E%3d&risl=&pid=ImgRaw&r=0" >
        <p class="name">睫毛膏</p>
        <p class="info">浓密如李芷涵的睫毛升级版</p>
        <p class="price">￥399</p>
        </div>
        <div class="item">
          <img src="https://img.zcool.cn/community/0138155d26e93ba801214837ade5ed.jpg@1280w_1l_2o_100sh.jpg" >
        <p class="name">散粉</p>
        <p class="info">廖雪媛家品牌赞助</p>
        <p class="price">￥499</p>
        </div>
        <div class="item">
          <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.qMCViSMXumiCU8btmNoA3gHaHa?pid=ImgDet&rs=1">
        <p class="name">眼影</p>
        <p class="info">张雨晴推荐五星级</p>
        <p class="price">￥599</p>
        </div>
        <div class="item">
          <img src="https://img.zcool.cn/community/017ad35ca42ceda801208f8bfa8742.jpg@1280w_1l_2o_100sh.jpg" >
        <p class="name">口红</p>
        <p class="info">敖舒晴常备正红色</p>
        <p class="price">￥699</p>
        </div>
    </div>

  </div>

</div>
<div class="footer">xiaoao@优选</div>
</body>
</html>